<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>快撤理赔</title>
    <link type="text/css" href="<c:url value='/resource/wx/newcss/common.css'/>" rel="stylesheet"/>
    <link rel="stylesheet" href="<c:url value='/resource/wechat/newcss/frozen.css'/>">
    <link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/newcss/main.css'/>"/>
    <script type="text/javascript" src="<c:url value='/resource/wx/js/jquery-2.1.1.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/resource/wx/newjs/ajaxfileupload.js'/>"></script>
    <script src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
    <script src="<c:url value='/resource/js/lrz/mobileFix.mini.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/resource/wx/newjs/common.js'/>"></script>
    <script src="<c:url value='/resource/js/lrz/exif.js'/>"></script>
    <script src="<c:url value='/resource/js/lrz/lrz.js'/>"></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=qBholiSEA43Kk3sBiXAeQql9ReLMZGqW&s=1"></script>
    <style type="text/css">
        .ui-form-item label:not(.ui-switch):not(.ui-checkbox):not(.ui-radio) {
            width: 105px;
        }

        .ui-form-item input, .ui-form-item textarea {
            padding-left: 105px;
        }
    </style>
</head>

<script type="text/javascript">
    $(function () {
        //自动定位
        initLocation();
    })

    function nextstep() {
        var ct = $("#ct").val();
        if (ct == '' || ct == undefined) {
            toast("请上传车头方向照片");
            return false;
        }
        var cw = $("#cw").val();
        if (cw == '' || cw == undefined) {
            toast("请上传车尾方向照片");
            return false;
        }
        var pz = $("#pz").val();
        if (pz == '' || pz == undefined) {
            toast("请上传碰撞部位照片");
            return false;
        }
        $("#xczp").hide();
        $("#sgdd").show();
    }

    function save() {
            var address = $('#address').val();
            if (address == '' || address == undefined) {
                toast("请输入事发地点");
                return false;
            }

            $("#form_kclp").ajaxSubmit({
                dataType: "json",
                success: function (resp) {
                    if (resp) {
                        toast("上传快撤理赔信息成功");
                        setTimeout(function () {
                            window.location.href = "${pageContext.request.contextPath}/weixin/wx_member/index";
                        }, 1000);
                    } else {
                        toast("上传快撤理赔信息失败");
                        return false;
                    }
                }
            });
    }

    function initLocation() {
        var gc = new BMap.Geocoder();
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                gc.getLocation(r.point, function (rs) {
                    var addComp = rs.addressComponents;
                    var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                    var jwd = rs.point.lng + ',' + rs.point.lat;
                    $("#address").val(address);
                    $("#address1").val(address);
                    $("#jwd").val(jwd);
                });
            }
        }, {
            enableHighAccuracy: true
        });
    }

    function uploadImage(type) {
        if (type == '1') {
            $("#carfile1").click();
        } else if (type == '2') {
            $("#carfile2").click();
        } else if (type == '3') {
            $("#carfile3").click();
        }
    }

    function readFile(obj, type) {
        var file = obj.files[0];
        //判断类型是不是图片
        if (!/image\/\w+/.test(file.type)) {
            obj.outerHTML = obj.outerHTML.replace(/(value=\").+\"/i, "$1\"");
            toast("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            if (type == '1') {
                $("#preview1").attr("src", this.result);
                $("#Base64-1").val(this.result);
            } else if (type == '2') {
                $("#preview2").attr("src", this.result);
                $("#Base64-2").val(this.result);
            } else if (type == '3') {
                $("#preview3").attr("src", this.result);
                $("#Base64-3").val(this.result);
            }
        }

        var size = file.size;
        var suff = file.name.substr(file.name.lastIndexOf("."));

        if (type == '1') {
            $("#size1").val(size);
            $("#suff1").val(suff);
            $("#ct").val("1");
        } else if (type == '2') {
            $("#size2").val(size);
            $("#suff2").val(suff);
            $("#cw").val("1");
        } else if (type == '3') {
            $("#size3").val(size);
            $("#suff3").val(suff);
            $("#pz").val("1");
        }
    }
</script>

<body ontouchstart>

<%--<c:if test="${pt != 'I'}">
<header class="ui-header ui-header-positive ui-border-b">
    <i class="ui-icon-return" onclick="history.back()"></i>
    <h1>快撤理赔 </h1>
</header>
</c:if>--%>
<div style="display: none">
<form id="form_kclp" action="<c:url value='/weixinquery/savekclp'/>" method="post">
    <input id="Base64-1" type="hidden" name="Base64-1">
    <input id="size1" type="hidden" name="size1">
    <input id="suff1" type="hidden" name="suff1">
    <input id="Base64-2" type="hidden" name="Base64-2">
    <input id="size2" type="hidden" name="size2">
    <input id="suff2" type="hidden" name="suff2">
    <input id="Base64-3" type="hidden" name="Base64-3">
    <input id="size3" type="hidden" name="size3">
    <input id="suff3" type="hidden" name="suff3">
    <input id="address1" type="text" value="" name="address"/>
    <input id="jwd" type="hidden" value="" name="jwd"/>
</form>
</div>

<section class="ui-container">
    <div id="xczp">
        <div class="kclp_tit">
            现场照片
        </div>
        <ul class="text_img">
            <li>
                <div class="text_img_lf" id="uploadimage1" onclick="uploadImage('1')"><img id="preview1"
                                                                                           src="<c:url value="/resource/wx/newimg/kclp01.png"/>"/>
                </div>
                <div class="text_img_rt">
                    <div class="text_main">
                        <span class="font14">上传车头方向照片</span>
                        <span class="font12">要求：拍照清晰，反映事物全貌，体现周围环境、道路标线、过错（如变道占线）</span>
                    </div>
                </div>
            </li>
            <div style="display:none;">
                <input id="carfile1" onchange="readFile(this,'1')" type="file"
                       accept="image/jpg,image/jpeg,image/png,image/gif"
                       multiple="multiple" capture="camera" valid="required" valid="required" errmsg="请上传车头方向照片"
                       name="carfile1"/>
                <input id="ct" type="hidden">
            </div>

            <li>
                <div class="text_img_lf" id="uploadimage2" onclick="uploadImage('2')"><img id="preview2"
                                                                                           src="<c:url value="/resource/wx/newimg/kclp02.png"/>"/>
                </div>
                <div class="text_img_rt">
                    <div class="text_main">
                        <span class="font14">上传车尾方向照片</span>
                        <span class="font12">要求：细节照片一张，提现碰撞接触部位，刮擦痕迹与损失。</span>
                    </div>
                </div>
            </li>
            <div style="display:none;">
                <input id="carfile2" onchange="readFile(this,'2')" type="file"
                       accept="image/jpg,image/jpeg,image/png,image/gif"
                       multiple="multiple" capture="camera" valid="required" valid="required" errmsg="请上传车尾方向照片"
                       name="carfile2"/>
                <input id="cw" type="hidden">
            </div>

            <li>
                <div class="text_img_lf" id="uploadimage3" onclick="uploadImage('3')"><img id="preview3"
                                                                                           src="<c:url value="/resource/wx/newimg/kclp03.png"/>"/>
                </div>
                <div class="text_img_rt">
                    <div class="text_main">
                        <span class="font14">上传碰撞部位照片</span>
                        <span class="font12">要求：细节照片一张，提现碰撞接触部位，刮擦痕迹与损失。</span>
                    </div>
                </div>
            </li>
            <div style="display:none;">
                <input id="carfile3" onchange="readFile(this,'3')" type="file"
                       accept="image/jpg,image/jpeg,image/png,image/gif"
                       multiple="multiple" capture="camera" valid="required" valid="required" errmsg="请上传碰撞部位照片"
                       name="carfile3"/>
                <input id="pz" type="hidden">
            </div>

        </ul>

        <div class="demo-block">
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-primary" id="next_but" onclick="nextstep();">
                    下一步
                </button>
            </div>
        </div>

    </div>

    <!--事故地点-->
    <div id="sgdd" style="display: none;">
        <div class="kclp_tit">
            事故地点(点击文本框，可以修改)
        </div>
        <div class="kclp_line">
            <div class="kclp_line_lf">
                <i class="ui-icon-pin"></i>
            </div>
            <div class="kclp_line_rt">
                <input id="address" type="text" value="" name="address"/>
            </div>
        </div>

        <div class="demo-block">
            <div class="ui-btn-wrap">
                <button id="save" class="ui-btn-lg ui-btn-primary" onclick="save();" style="margin-top: 30px;">
                    提交
                </button>
            </div>
        </div>
    </div>

</section>

</body>
</html>
